<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/animate4.1.1.min.css">
    <link rel="stylesheet" href="../../css/Head.css">
    <link rel="stylesheet" href="../../css/LongTermTeenager.css">
    <link rel="stylesheet" href="../../css/Admin.css">
    <title>长远少年</title>
</head>
<body>
<div>
    <div id="Head">
        <div>
            <div class="head">
                <a @click="AdminLoginishow">
                    <img src="../../img/Logo.svg">
                </a>
                <!--PC端大标题-->
                <ul>
                    <a v-for="(item,index) in headlineS" >
                        <li @click="skip(index)"
                            :class="head_ul_li_hover==index?'head_ul_li_hover':''" :key="index">{{ item }}
                        </li>
                    </a>
                    <li class="nav-box" :class="nav_boxClass[head_ul_li_hover]"></li>
                </ul>
                <!-- 显示隐藏 小标题按钮     -->
                <div @click="hiddenBox =!hiddenBox" ref="btn-wrap" class="btn-wrap">
                    <p v-for="item in 3" :class="hiddenBox?btnWrapClass[item-1]:''" :key="item-1"></p>
                </div>
            </div>
            <!--手机端小标题-->
            <transition-group
                    name=" animate__animated  "
                    enter-active-class="animate__fadeIn"
                    leave-active-class="animate__fadeOut">

                <div class="hiddenBox" v-show="hiddenBox" key="1">
                    <ul>
                        <a v-for="(item,index) in headlineS">
                            <li @click="skip(index)"
                                :class="head_ul_li_hover==index?'hiddenBoxLiHous':''" :key="index">{{ item }}
                            </li>
                        </a>
                    </ul>
                </div>
            </transition-group>


        </div>

    </div>

    <div class="LongTermTeenager">
        <div class="LongTermTeenager_D1">

            <div class="LongTermTeenager_D1_pc">
                <div class="LongTermTeenager_D1_pc_D">

                    <div class="D1_pc_title">
                        <div>
                            <img width="50%" src="../../img/a首页3路径.png">
                        </div>
                        <div>
                            <h1>长远少年·一起成长的故事</h1>
                            <p>合作是柔和的力量，成长是智慧的绽放，当二者相遇，将创造无限可能的奇迹</p>
                        </div>
                    </div>

                    <div class="D1_pc_content">
                        <div class="D1_pc_content_D1">
                            <img width="110%" src="../../img/c少年1s.png">
                        </div>
                        <div class="D1_pc_content_D2">
                            <ul>
                                <li>
                                    <div class="D1_pc_content_D2_li_D1">
                                        <img src="../../img/c少年1s.png">
                                    </div>
                                    <div class="D1_pc_content_D2_li_D2">
                                        <h4>《A+闯关挑闯关挑闯关挑闯关挑</h4>
                                        <p>陈肖均叙述他 在长远的遇见遇见在长远的55</p>
                                    </div>
                                </li>

                                <li>
                                    <div class="D1_pc_content_D2_li_D1">
                                        <img src="../../img/c少年1s.png">
                                    </div>
                                    <div class="D1_pc_content_D2_li_D2">
                                        <h4>《A+闯关挑闯关挑闯关挑闯关挑</h4>
                                        <p>陈肖均叙述他 在长远的遇见遇见在长远的55</p>
                                    </div>
                                </li>

                                <li>
                                    <div class="D1_pc_content_D2_li_D1">
                                        <img src="../../img/c少年1s.png">
                                    </div>
                                    <div class="D1_pc_content_D2_li_D2">
                                        <h4>《A+闯关挑闯关挑闯关挑闯关挑</h4>
                                        <p>陈肖均叙述他 在长远的遇见遇见在长远的55</p>
                                    </div>
                                </li>

                                <li>
                                    <div class="D1_pc_content_D2_li_D1">
                                        <img src="../../img/c少年1s.png">
                                    </div>
                                    <div class="D1_pc_content_D2_li_D2">
                                        <h4>《A+闯关挑闯关挑闯关挑闯关挑</h4>
                                        <p>陈肖均叙述他 在长远的遇见遇见在长远的55</p>
                                    </div>
                                </li>


                            </ul>
                            <div class="D1_pc_content_D2_btn">
                                细说故事的故事
                            </div>
                        </div>
                    </div>


                </div>


            </div>

        </div>
    </div>


    <div class="AdminLogin">
        <div class="AdminLogin_From animate__animated animate__fadeInUp">
            <div class="AdminLogin_From_close AdminLoginishow"></div>
            <h1>管理员登录</h1>
            <input type="text" placeholder="学号:">
            <input type="text" placeholder="密码:">
            <button>登录</button>
        </div>
    </div>
</div>
<script src="../../js/jquery_3.6.4.js"></script>
<script src="../../js/vue-v2.7.13.js"></script>
<script>
    IsShow = true //控制 AdminLoginishow 管理员登录 的显示隐藏
    $('.AdminLogin').css('display', 'none')
    $('.AdminLoginishow').click(() => {
        IsShow = !IsShow
        if (IsShow == true) {
            $('.AdminLogin').css('display', 'none')
        } else {
            $('.AdminLogin').css('display', 'flex')
        }
    })
    new Vue({
        el: '#Head',
        data() {
            return {
                head_ul_li_hover: 2,
                state: document.body.clientWidth,
                hiddenBox: false,
                headlineS: ["首页", "长远创造", "长远少年", "长远导师", "关于我们"],
                btnWrapClass: ["btn-wrap_p_show0", "btn-wrap_p_show1", "btn-wrap_p_show2"],
                nav_boxClass: ["nav-box1", "nav-box2", "nav-box3", "nav-box4", "nav-box5"],
                hrefs: ["./index.html", "./LongTermCreation.html", "./LongTermTeenager.html", "#", "#"],
            }
        },
        methods: {
            AdminLoginishow() {
                IsShow = !IsShow
                if (IsShow == true) {
                    $('.AdminLogin').css('display', 'none')
                } else {
                    $('.AdminLogin').css('display', 'flex')
                }
            }  ,skip(index) {
                if (this.hrefs[index]!="#"){
                    this.head_ul_li_hover=index
                    window.location.href=this.hrefs[index]
                }else {
                    alert("此页面正在建设中")
                }
            }
        }

    })

    function debounce(delay) {//防抖
        let timer;
        return function () {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(() => {
                SetCss()
            }, delay);
        }
    }

    function SetCss() {
        const windowInfo = {
            width: window.innerWidth,
            hight: window.innerHeight
        }
        if ($(".LongTermTeenager_D1_pc")[0].offsetHeight < $(".LongTermTeenager_D1_pc_D")[0].offsetHeight) {
            $(".LongTermTeenager_D1_pc").css("align-items", "flex-start")
        } else {
            $(".LongTermTeenager_D1_pc").css("align-items", "center")
        }
    }

    SetCss()
    window.addEventListener('resize', debounce(500));
</script>
</body>
</html>